<template>
  <div id="app">
    
  </div>
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';

import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat, transform } from 'ol/proj.js';
// import * as echarts from 'echarts';
import EChartsLayer from 'ol-echarts'
import createOption from './creatOption'


export default {
  data(){
    return{
      map:null
    }
  },
  mounted(){
    // console.log(echarts);
    this.init()
  },
  methods:{
    init(){
      const TDDLayer = new TileLayer({
        source: new XYZ({
          url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        }),
        zIndex: 1
      });
      
      this.map = new Map({
        target: 'app', // 地图容器
        layers: [TDDLayer],
        view: new View({
          projection: 'EPSG:3857',
          center: transform([113.133903, 27.82771], 'EPSG:4326', 'EPSG:3857'),
          zoom: 5,
        }),
        logo: true
      });

      var echartslayer = new EChartsLayer(createOption());
          echartslayer.appendTo(this.map)
    }
  }
}
</script>

<style>
html,body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#app{
  width: 100%;
  height: 100%;
}
</style>
